<template>
  <div class="progress-bar">
     <div class="p-line"></div>
     <div class="p-done" :style="{width:doneWidth}"> </div>
     <div class="p-top">{{actualScore}}/{{totalScore}}</div>
  </div>
</template>
<script>
export default {
  props:{
    actualScore:Number,
    totalScore:Number


  },

  computed:{
    ratio(){
      const r = this.actualScore/this.totalScore
      return r
    },
    doneWidth(){
      return this.actualScore/this.totalScore*100 + '%'
    }
  },
  mounted(){
    
  },
}
</script>
<style lang="scss" scoped>
.progress-bar{
  width:100%;
  position: relative;
  .p-line{
    position: absolute;
    z-index: 1;
    width:100%;
    height: rem(40);
    border-radius: rem(5);
    background-color: #a9907b;
    text-align: center;
  }
  .p-done{
    position: absolute;
    z-index: 2;
    height: rem(40);
    border-radius: rem(5);
    background: #58ba77;
    background-size: rem(30) rem(30);
    
  }
  .p-top{
    position: absolute;
    left: 50%;
    margin-left: rem(-110);
    z-index: 3;
    width: rem(220);
    height: rem(40);

    line-height: rem(40);
    background:transparent;
    font-size: rem(35);
    text-align: center;
    color: #fff;
    
  }
}
</style>
